import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Card, Flex, message, Upload, Button, Form } from "antd";
import { delViewTag } from "@/utils/common";
import TableWarpper from "@/components/TableWarpper";
export const UserRole = () => {
  const navigate = useNavigate();
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);

  const [data, setData] = useState([]);
  const [defaultCurrent, setDefaultCurrent] = useState(1);
  const [total, setTotal] = useState();

  useEffect(() => {
    let data1 = [];
    for (let i = 0; i < 10; i++) {
      data1.push({
        id: i + 1,
        key: i,
        roleName: `Edward King${i}`,
        companyName: `companyName${i}`,
      });
    }
    setData(data1);
    setTotal(data1.length);
  }, []);

  const onSelectChange = (newSelectedRowKeys: React.Key[], selectedRows) => {
    // console.log('selectedRowKeys changed: ', newSelectedRowKeys, selectedRows);
    setSelectedRowKeys(newSelectedRowKeys);
    setSelectedRows(selectedRows);
  };

  // 表格选择
  const rowSelection = {
    // type: 'checkbox', checkbox | radio
    selectedRowKeys,
    hideSelectAll: false,
    onChange: onSelectChange,
  };

  const columns = [
    {
      title: "序号",
      dataIndex: "",
      key: "index",
      //   render: (_, record, index) => {
      //     return (
      //         <span>{index + 1}</span>
      //     )
      //   },
      render: (_, record, index) => index + 1,
    },
    {
      title: "角色名称",
      dataIndex: "roleName",
      key: "roleName",
    },
    {
      title: "部门名称",
      dataIndex: "companyName",
      key: "companyName",
    },
  ];

  // 表格配置
  const tableSetting = {
    rowSelection: rowSelection,
    columns: columns,
    data: data,
    bordered: false,
  };
  // 分页配置
  const paginationSetting = {
    showSizeChanger: true,
    showQuickJumper: true,
    defaultCurrent: defaultCurrent,
    total: total,
  };

  const formBasicMenuSlot = (
    <p style={{ marginTop: "10px", textAlign: "center" }}>
      <Button type="primary" htmlType="submit" onClick={(e) => handleSubmit()}>
        保存
      </Button>
      <Button
        style={{ marginLeft: "20px" }}
        htmlType="button"
        onClick={(e) => handleClose()}
      >
        返回
      </Button>
    </p>
  );

  const handleSubmit = () => {
    console.log(selectedRows);
    delViewTag("/user/role");
    navigate("/system/user");
  };

  const handleClose = () => {
    delViewTag("/user/role");
    navigate("/system/user");
  };

  return (
    <div className="userRole pageWarpper">
      <TableWarpper
        tableSetting={tableSetting}
        paginationSetting={paginationSetting}
      />
      {formBasicMenuSlot}
    </div>
  );
};

export default UserRole;
